<template>
  <div>
    <div v-if="dataList.length">
      <stock-list
        :list="dataList"
        stockTag="heavy"
        unit="rem"
        fixed="left"
        :expand="false"
        :fixedHead="true"
        :offsetTop="offsetTop"
        @headSort="onSortClick"
        @clickRow="onRowClick"
      >
        <!-- 股票名称 -->
        <stock-list-item prop="stock_code" label="股票名称" label-width="1.7rem" label-align="left">
          <tempalte v-slot="scope">
            <div class="stock-detail-template">
              <div v-if="scope.stock_name" class="stock-td" v-hxm-fontResize="{ minSize: 6 }">
                {{ scope.stock_name }}
              </div>
              <div v-else>--</div>
              <div>{{ scope.stock_code }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 涨幅 -->
        <stock-list-item
          prop="upDownPercent"
          label="涨幅"
          label-width="1.4rem"
          :sortable="true"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template" :key="scope.upDownPercent">
              <div v-if="scope.upDownPercent > 0" class="up_data">{{ scope.upDownPercent }}%</div>
              <div
                v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                class="zero_data"
              >
                {{ scope.upDownPercent }}%
              </div>
              <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
              <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 现价 -->
        <stock-list-item
          prop="nowPrice"
          label="现价"
          :sortable="true"
          label-width="1.4rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div v-if="scope.upDownPercent > 0" class="up_data">
                {{ scope.nowPrice }}
              </div>
              <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
                {{ scope.nowPrice }}
              </div>
              <div v-else-if="['', undefined, -9999].includes(scope.nowPrice)">--</div>
              <div v-else class="down_data">
                {{ scope.nowPrice }}
              </div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 区间涨幅 -->
        <stock-list-item
          prop="range_rise"
          label="区间涨幅"
          :sortable="true"
          label-width="1.6rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div :class="getColorClass(scope.range_rise)">
                {{ formatPercent(scope.range_rise, 2, false, true) }}
              </div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 入池时间 -->
        <stock-list-item
          prop="open_date"
          label="入池时间"
          :sortable="true"
          label-width="2rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div>{{ timestampToTime(scope.open_date, 3) }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 入池价格 -->
        <stock-list-item
          prop="cost_price"
          label="入池价格"
          :sortable="true"
          label-width="1.6rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div>{{ scope.cost_price || '--' }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 出池时间 -->
        <stock-list-item
          prop="liquidation_date"
          label="出池时间"
          :sortable="true"
          label-width="2rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div>{{ timestampToTime(scope.liquidation_date, 3) }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 出池价格 -->
        <stock-list-item
          prop="liquidation_price"
          label="出池价格"
          :sortable="true"
          label-width="1.6rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div>{{ scope.liquidation_price || '--' }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 所属行业 -->
        <stock-list-item
          prop="industry"
          label="所属行业"
          :sortable="false"
          label-width="1.8rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div>{{ scope.industry || '--' }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 建议仓位 -->
        <stock-list-item
          prop="suggest_position"
          label="建议仓位"
          :sortable="true"
          label-width="1.6rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table-in-template">
              <div>{{ formatPercent(scope.suggest_position, 2, false, true) || '--' }}</div>
            </div>
          </tempalte>
        </stock-list-item>
      </stock-list>
    </div>
    <div v-else>
      <empty-pool minHeight="78vw" desc="暂无推荐，请持续关注"></empty-pool>
    </div>
  </div>
</template>

<script>
import { STOCK_STATUS } from '@/config/pool';
import { jumpTokline, formatText, formatPercent, getColorClass, timestampToTime } from '@/utils';
import { sortCustom, sortNumber, sortDateStr } from '@/utils/tool';
import strategies from '@/components/detail/strategies';
import EmptyPool from '@/components/detail/EmptyPool.vue';

export default {
  data() {
    return {
      dataList: [],
      lastSortArg: null,
    };
  },
  props: {
    offsetTop: {
      type: String,
      default: '0px',
    },
    detailTableData: {
      default: () => [],
      type: Array,
    },
  },
  components: {
    EmptyPool,
  },
  watch: {
    detailTableData: {
      handler(val) {
        this.dataList = JSON.parse(JSON.stringify(val));
        this.sort();
      },
      immediate: true,
    },
  },
  methods: {
    formatText,
    formatPercent,
    getColorClass,
    timestampToTime,
    getStatus(status) {
      return STOCK_STATUS[status] || '--';
    },

    /**
     * 获取策略的颜色
     */
    getStrategyColor(strategyName) {
      const strategy = strategies.find(item => item.strategyName === strategyName);
      return strategy ? strategy.displayColor : '#989898';
    },
    // 根据子组件中传来的值，对所有数据排序
    onSortClick(arg) {
      this.lastSortArg = arg;
      this.sort();
    },
    sort() {
      if (!this.lastSortArg) {
        return;
      }
      const customSortTypes = ['klinebx', 'qsld', 'zlld', 'cjjg', 'AIhyd'];
      const dateSortTypes = ['add_date', 'buy_date'];
      const noSortTypes = ['stock_code', 'industry', 'status'];
      if (noSortTypes.includes(this.lastSortArg.sortKey)) {
        return;
      }
      const SORT_TYPE = {
        default: 0,
        // 升序
        asc: 1,
        // 降序
        desc: 2,
      };
      if (customSortTypes.includes(this.lastSortArg.sortKey)) {
        this.dataList.sort(sortCustom(this.lastSortArg.sortKey));
      } else {
        dateSortTypes.includes(this.lastSortArg.sortKey)
          ? this.dataList.sort(sortDateStr(this.lastSortArg.sortKey))
          : this.dataList.sort(sortNumber(this.lastSortArg.sortKey));
      }

      // 根据排序标签调整排序方向
      if (this.lastSortArg.currentSortTag === SORT_TYPE.desc) {
        this.dataList.reverse();
      } else if (this.lastSortArg.currentSortTag === SORT_TYPE.default) {
        this.dataList = JSON.parse(JSON.stringify(this.detailTableData));
      } else {
        //
      }
    },

    /**
     * k线跳转
     */
    onRowClick(row) {
      jumpTokline(row.stock_code, row.market);
    },
  },
};
</script>

<style lang="less" scoped>
.table-in-template {
  color: var(--text-1);
  text-align: right;
  height: 0.8rem;
  padding-top: 0.4rem;
}
.stock-detail-template {
  color: var(--text-1);
  height: 1rem;
  padding-top: 0.2rem;
  text-align: left;
  div:nth-child(2) {
    padding-top: 0.1rem;
    font-size: 0.24rem;
    color: #999999;
  }
}

.stock-td {
  width: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
}
</style>
